<template>
	<view>
		<view class="" style="padding: 30rpx;">
			<view style="font-size:36rpx;padding-top:20rpx;padding-bottom:50rpx;font-weight: bold;">这是给谁做模卡？</view>
			<view @click="toMyself" class="toMyself">
				<view class=""
					style="display: flex;flex-direction: row;align-items: center;justify-content: flex-start;">
					<view style="padding:20rpx;font-size:36rpx;color: #FFF;">给<text
							style="font-size:50rpx;color: #FFDD00;padding: 0 8rpx;">自己</text>做制作<uni-icons type="right"
							size="20" color="#FFF"></uni-icons></view>

				</view>
				<view style="display: flex;flex-direction: row;align-items: center;justify-content: flex-end;">
					<uni-icons type="star-filled" size="50" color="#fff"></uni-icons>
				</view>
			</view>
			<!-- <view @click="toOther" class="toOther">
				<view style="padding:20rpx;font-size:40rpx;">给别人制作</view>
			</view> -->

			<view @click="toOther" class="toOther">
				<view class=""
					style="display: flex;flex-direction: row;align-items: center;justify-content: flex-start;">
					<view style="padding:20rpx;font-size:36rpx;color: #FFF;">给<text
							style="font-size:50rpx;color: #FFDD00;padding: 0 8rpx;">别人</text>做制作<uni-icons type="right"
							size="20" color="#FFF"></uni-icons></view>
				</view>
				<view style="display: flex;flex-direction: row;align-items: center;justify-content: flex-end;">
					<uni-icons type="starhalf" size="50" color="#fff"></uni-icons>
				</view>
			</view>
		</view>


		<view style="position: fixed; bottom: 10rpx; index:100; width:100vw;border-top:1rpx solid #CCC;padding: 20rpx;">
			<view>已选照片</view>
			<view style="padding:10rpx;display: flex;flex-direction: row;">
				<view v-for="(item,index) in tempMoka" :key="index" class="image-list">
					<image :src="item.tempFilePath" style="width:160rpx;height:160rpx;" mode="aspectFill"
						v-if="index <= 3"></image>
					<view class="" v-if="index == 3 && (tempMoka.length - 4) != 0"
						style="position: absolute;bottom: 0%;right: 0%;background-color: rgba(0,0,0,0.5);padding: 2rpx 10rpx;color: #FFF;font-size: 20rpx;">
						<text>+</text><text style="font-size: 22rpx;">{{ tempMoka.length - 4 }}</text>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mokaStyle: 0,
				mokaTemplateID: 0,
				tempMoka: []
			};
		},
		onLoad(option) {
			this.mokaStyle = option.style;
			this.mokaTemplateID = option.mokaTemplateID;
			this.tempMoka = uni.getStorageSync("tempMoka");


		},
		methods: {
			toMyself() {
				// 如果信息不全，先去补全信息；
				uni.navigateTo({
					url: '/moka/pages/mokaMyInfo?style=' + this.mokaStyle + '&mokaTemplateID=' + this
						.mokaTemplateID
				})

				// // 如果信息全，则直接到制作页面；
				// if (this.mokaStyle == 1) {
				// 	uni.navigateTo({
				// 		url: '/moka/pages/mokaMakeingHeng?targetUser=0&mokaTemplateID=' + this.mokaTemplateID
				// 	})
				// } else if (this.mokaStyle == 2) {
				// 	uni.navigateTo({
				// 		url: '/moka/pages/mokaMakeingShu?targetUser=0&mokaTemplateID=' + this.mokaTemplateID
				// 	})
				// }

			},
			toOther() {
				uni.navigateTo({
					url: '/moka/pages/mokaOtherList?style=' + this.mokaStyle + '&mokaTemplateID=' + this
						.mokaTemplateID
				})

				// 如果信息全，则直接到制作页面；
				// if (this.mokaStyle == 1) {
				// 	uni.navigateTo({
				// 		url: '/moka/pages/mokaMakeingHeng?targetUser=1&mokaTemplateID=' + this.mokaTemplateID
				// 	})
				// } else if (this.mokaStyle == 2) {
				// 	uni.navigateTo({
				// 		url: '/moka/pages/mokaMakeingShu?targetUser=1&mokaTemplateID=' + this.mokaTemplateID
				// 	})
				// }
			}
		}
	}
</script>

<style lang="scss">
	.image-list {
		width: 160rpx;
		height: 160rpx;
		margin-right: 10rpx;

		&:nth-child(4) {
			margin-right: 0;
			position: relative;
		}
	}

	.toMyself {
		height: 220rpx;
		background-color: #ffa837;
		border-radius: 5rpx;
		padding: 0 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.toOther {
		margin-top: 30rpx;
		height: 220rpx;
		background-color: #3a89ff;
		border-radius: 5rpx;
		padding: 0 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
</style>